<script lang="ts" setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue";

let lhxd=ref(null)

// 挂载前
onBeforeMount(()=>{
    console.log("-----onBeforeMount-----")
})
// 挂载后
onMounted(()=>{
    console.log("-----onMounted-----")
    const Lhxd=document.querySelector("#lhxd");
    console.log(lhxd.value);
    console.log(Lhxd);
})
onBeforeUpdate(()=>{
    console.log("-----onBeforeUpdate-----")
})
onUpdated(()=>{
    console.log("-----onUpdated-----")
})
// 卸载之前
onBeforeUnmount(()=>{
    console.log("-----onBeforeUnmount-----")
})
// 卸载之后
onUnmounted(()=>{
    console.log("-----onUnmounted-----")
})
</script>

<template>
    <div>
        <a ref="lhxd">想和hxd同房</a>
    </div>
</template>

<style scoped>
div{
    width: 180px;
    margin: auto;
    font-size: 30px;
}
</style>